<script setup lang="ts">
import { ref, watch } from "vue";
import Show from "@/components/common/Show.vue";
const items = ref<any>([]);
export interface Props {
  content?: string;
}

const emits = defineEmits(["close"]);
const props = withDefaults(defineProps<Props>(), {
  content: "这是一条提示",
});
let timer1: any = null;
let timer2: any = null;
const onClicik = () => {
  emits("close", "关闭");
  items.value.push({ isShow: true });
  clearInterval(timer1);
  clearTimeout(timer2);
  timer1 = setTimeout(() => {
    items.value.forEach((item: any, index: number) => {
      item.isShow = false;
    });
  }, 2000);
  timer2 = setTimeout(() => {
    items.value = [];
  }, 2500);
};
</script>

<template>
  <button @click="onClicik">点击</button>

  <Show
    v-for="(item, index) in items"
    :key="index"
    :style="{ top: index * 50 + 'px' }"
    v-show="item?.isShow"
    :class="item?.isShow ? 'down' : 'up'"
  >
    <div class="prompt">{{ content }}</div>
  </Show>
</template>

<style scoped>
.prompt {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: #007bff;
  width: 150px;
  padding: 0.6rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  word-break: break-all;
}

.down {
  animation: down 0.3s linear forwards;
}
.up {
  animation: up 0.3s linear forwards;
}
@keyframes down {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 20px);
    opacity: 100%;
  }
}

@keyframes up {
  0% {
    transform: translate(-50%, 20px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
</style>
